<template>
  <div class="meetingHall-container">
    <el-card shadow="hover">
      <svg-icon
        class-name="qr_code-icon"
        icon-class="qr_code"
        @click="qrClick"
      />
      <div class="meetingHall-info">
        <div class="info-desc">
          <h3>
            <div class="desc_pointer">
              会议号: {{ item.meeting_code }}
              <el-tag type="success" size="small">
                {{ item.type == 0 ? '预定' : '快速' }}
              </el-tag>
            </div>
          </h3>
          <p>创建者: {{ item.creator }}</p>
          <p>会议名称: {{ item.subject }}</p>
          <p>密码: {{ item.password ? item.password : '无密码' }}</p>
          <p>开始时间: {{ item.start_time }}</p>
          <p>结束时间: {{ item.end_time }}</p>
        </div>
      </div>
      <div class="foot-dropdown">
        <el-dropdown style="height: 100%; width: 50%" trigger="contextmenu">
          <el-button type="info" @click="Phref">加入会议</el-button>
        </el-dropdown>
        <el-dropdown style="height: 100%; width: 50%">
          <el-button type="info">
            更多菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="select(1)">修改会议</el-dropdown-item>
              <el-dropdown-item @click="select(2)">复制链接</el-dropdown-item>
              <el-dropdown-item @click="select(4)">
                查看参会人员
              </el-dropdown-item>
              <el-dropdown-item @click="select(3)">取消会议</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-card>
    <el-dialog width="340px" title="会议二维码" v-model="qrVisible">
      <img :src="item.qrCodeImgUrl" />
    </el-dialog>
    <attendance-list ref="tabelRef"></attendance-list>
  </div>
</template>
<script>
  import { XmCopy } from '@/utils/common.js'
  import { ElMessage } from 'element-plus'
  import attendanceList from './attendanceList'
  import { ref } from 'vue'
  export default {
    name: 'meetingHall',
    props: { item: Object },
    emits: ['select'],
    components: { attendanceList },
    setup(props, context) {
      const tabelRef = ref(null)
      const select = function (type) {
        if (type === 2) {
          let item = ''
          if (props.item.creator)
            item += props.item.creator + ' 邀请您参加腾讯会议'
          if (props.item.subject)
            item = item + '\n' + '会议主题：' + props.item.subject
          if (props.item.start_time)
            item = item + '\n' + '开始时间：' + props.item.start_time
          if (props.item.end_time)
            item = item + '\n' + '结束时间：' + props.item.end_time + '\n'
          if (props.item.join_url)
            item =
              item +
              '\n' +
              '点击链接直接加入会议：' +
              '\n' +
              props.item.join_url +
              '\n'
          if (props.item.meeting_code)
            item =
              item +
              '\n' +
              '会议 ID：：' +
              props.item.meeting_code +
              '\n' +
              '复制该信息，打开微信小程序 融畅智联即可参与'

          const msg = XmCopy(item)
          if (msg) {
            ElMessage.success('复制成功')
          }
          return msg
        } else if (type === 4) {
          tabelRef.value.init(true, props.item.meeting_id)
          return
        }
        context.emit('select', { key: type, value: props.item })
      }
      const Phref = function () {
        let a = document.createElement('a')
        a.setAttribute(
          'href',
          'wemeet://page/inmeeting?meeting_code=' + props.item.meeting_code
        )
        a.setAttribute('target', '_blank')
        a.setAttribute('id', 'js_a')
        if (document.getElementById('js_a')) {
          document.body.removeChild(document.getElementById('js_a'))
        }
        document.body.appendChild(a)
        a.click()
      }
      const tagCopy = function () {
        const msg = XmCopy(props.item.meeting_code)
        if (XmCopy(props.item.meeting_code)) {
          ElMessage.success('复制成功')
        }
        return msg
      }
      // 二维码弹窗
      let qrVisible = ref(false)
      const qrClick = function () {
        console.log('qrClick')
        qrVisible.value = true
      }
      return {
        Phref,
        tagCopy,
        select,
        qrClick,
        qrVisible,
        tabelRef,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .meetingHall-container {
    width: 300px;
    height: 220px;
    // overflow: hidden;
    margin-left: 16px;
    margin-bottom: 16px;
    position: relative;
    .qr_code-icon {
      width: 40px;
      height: 40px;
      // float: right;
      position: absolute;
      top: 3px;
      right: 3px;
      color: #909399;
      z-index: 100;
      &:hover {
        cursor: pointer;
      }
      // background-color: black;
      // margin-right: 16px;
    }
    .meetingHall-info {
      height: 160px;
      padding: 20px 20px 0px;
      display: flex;
      justify-content: space-around;
      position: relative;
      .info-desc {
        display: inline-block;
        flex: 1;
        overflow: hidden;
        .copy-tags {
          margin-left: 5px;
          &:hover {
            cursor: pointer;
          }
        }
        .desc_pointer {
          cursor: pointer;
        }
        h3 {
          font-size: 16px;
          color: #303133;
          font-weight: 500;
          margin-bottom: 16px;
          margin-top: 0;
          display: flex;
          align-items: baseline;
          line-height: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          p {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            white-space: nowrap;
            max-width: 80px;
            vertical-align: bottom;
          }
          span {
            font-size: 13px;
            color: #909399;
            margin-left: 7px;
            font-weight: 400;
          }
        }
        > p {
          font-size: 13px;
          color: #909399;
          margin-bottom: 4px;
          margin-top: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // width: 77%;
        // padding: 0px 10px;
        // position: relative;
      }
    }
    :deep(.el-card__body) {
      padding: 0;
    }
    .foot-dropdown {
      height: 40px;
      .el-button {
        width: 100%;
        border-radius: 0px;
        background-color: #f9fafc;
        // border-radius: 0 0 4px 4px;
        border: 1px solid #e4e7ed;
        color: #909399;
      }
    }
    .dialogWidth {
      width: 340px;
    }
  }
</style>
